<template>
  <div class="app_container">
    <div class="header">
      <div class="left" @click="back()">
        <img class="image"
          src="https://img-bsy.txrpic.com/preview/Element/00/00/79/77/E-797794-1CFC42FE5.png?imageMogr2/quality/90/thumbnail/!800x%3E"
          alt="">
        <div class="">
          <div class="header-top">
            <div class="title">{{ kbName }}</div>
          </div>
          <div>
            知识库ID:{{ KBId}}
          </div>
        </div>
      </div>

      <div >
        <el-button type="primary" @click="toAdd()">插入</el-button>
        <el-button type="primary" @click="openFileSelector()">选择文件</el-button>
      </div>
    </div>


    <div class="w">
      <div class="item" v-for="(item, index) in lists" :key="index" @click="edit(item)">
        <div class="box_header">
<!--          <div class="tag">-->
<!--            #{{ item.num }}-->
<!--          </div>-->
          <div>ID:{{ item.chunkId }}</div>
        </div>
        <div class="content">
          {{ item.text }}
        </div>
      </div>
      <!-- 添加更多项目 -->
    </div>

    <el-dialog v-model="dialogVisible" title="新增内容" width="500" :before-close="handleClose">
      <el-input v-model="tempInfo.text" style="width: 240px" :rows="2" type="textarea"
        placeholder="Please input" />
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {getChunks, uploadFile} from "@/api/kbapi.ts";
import {mapGetters} from "vuex";

export default {
  name: 'MyAppBox',
  computed: {
    kbName: {
      get() {
        return this.getKbName;
      },
      set(value) {
        this.setKbName(value);
      }
    },
    ...mapGetters([
      'getKbName'
    ])
  },
  data() {
    return {
      kbName:"劳动法",
      KBId: 1,
      isEdit: false,
      currentIndex: 0,
      tempInfo: {
        num: 0,
        text: ''
      },
      dialogVisible: false,
      textarea: '',
      lists: [
        { chunkId: 1, num: 0, text: '' },
        { chunkId: 2, num: 3, text: '' },
        // { chunkId: 3, num: 4, text: '' },
        // { chunkId: 4, num: 1, text: '' }
      ]
    }
  },
  created() {
    this.kbName=this.getKbName
    console.log('created')
    this.KBId = this.$route.query.kbId
    console.log(this.KBId)
    getChunks(this.KBId).then((res) => {
      console.log(res)
      this.lists = res.data
    }).catch((err) => {
      console.log(err)
    });
  }
  ,
  methods: {
    toDetail() {
      this.$router.push('/knDetail')
    },
    back() {
      this.$router.back()
    },

    toAdd() {
      this.tempInfo = {}
      this.dialogVisible = true
    },
    openFileSelector() {
      //创建input元素
      const input = document.createElement('input');
      input.type = 'file';
      input.click();

      //监听文件选择事件
      input.onchange = (event) => {
        const file = event.target.files[0];
        //处理选中的文件
        console.log(file);
        uploadFile(file,this.KBId).then((res) => {
          console.log(res)
        }).catch((err) => {
          console.log(err)
        });
      }
    },
    edit(item) {
      this.currentIndex = item.chunkId
      this.isEdit = true
      this.tempInfo = item
      this.dialogVisible = true
    },
    confirm() {
      if (this.isEdit) {
        let myObj = this.lists.find(box => box.chunkId == this.currentIndex)
        console.log(myObj)
        myObj = this.tempInfo
        this.dialogVisible = false
        this.isEdit = false
      }
      else {
        this.tempInfo.chunkId = this.lists[this.lists.length - 1].chunkId + 1
        this.lists.push(this.tempInfo)
        this.dialogVisible = false
        this.isEdit = false
      }
    }
  }
}
</script>

<style>
.app_container {
  padding: 10px;
}

.w {
  display: flex;
  flex-wrap: wrap;
}

.image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.box_header {
  display: flex;
  justify-content: space-between;
}

.tag {
  border: 1px solid #2e6de0;
  width: 50px;
  border-radius: 8px;
  background-color: #edf1f8;

}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-right: 30px
}

.left {
  flex: 1;
  display: flex;
}

.box {
  border: 1px solid #ccc;
}

.container {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* 可以根据需要修改对齐方式 */
}


.item {
  height: 200px;
  width: calc(25% - 28px);
  margin-left: 23px;
  /* 计算宽度，考虑到间距 */
  margin-bottom: 20px;
  /* 间距，可以根据需要调整 */
  background-color: white;
  /* 示例背景颜色 */
  text-align: center;
  /* 可以根据需要调整元素内部布局 */
  padding: 15px;
  /* 可以根据需要调整元素内部间距 */
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 8px;
  /* 让宽度包括 padding 和 border */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* 大阴影效果 */
  overflow: auto;
}
</style>
